<template>
  <div class="home-wrapper">
    <header>
      仿知乎专栏
      <div class="btn">
        <el-button type="primary" plain>登录</el-button>
        <el-button type="primary" plain>注册</el-button>
      </div>
    </header>
    <div class="boxx">
      <!-- 中间 -->
      <div class="con">
        <el-empty>
          <el-button type="primary">开始写文章</el-button>
        </el-empty>
      </div>
      <!-- ；；；； -->
      <div class="box-wrapper">
        <div class="title">发现精彩</div>
        <div class="boxall">
          <div class="box" v-for="item in store.list" :key="item._id">
            <div class="imgbox">
              <div class="img">
                <img :src="item.avatar.url" alt="" />
              </div>
              <span>{{ item.title }}</span>
            </div>
            <div class="zi">
              &emsp;&emsp;
              {{ item.description }}
            </div>
            <el-button type="primary" plain>进入专栏</el-button>
          </div>
        </div>
        <div class="foo">
          <el-button type="primary" @click="addList()"
            >加载更多......</el-button
          >
        </div>
      </div>
    </div>

    <footer>*************</footer>
  </div>
</template>

<script lang="ts" setup>
import { ColumnList } from "@/api/home";
import { ref, toRefs, reactive, onMounted } from "vue";

const store = reactive({
  list: [],
  page: {
    currentPage: 1,
    pageSize: 6,
  },
  count: 0, //总条数
});

onMounted(() => {
  getList();
});

const addList = () => {
  store.page.currentPage++;
  getList();
};

const getList = async () => {
  const res = await ColumnList(store.page);
  console.log(res, "111");

  // store.list =[...store.list, ...res.data.data.list];
  //  [...this.bookdata, ...res.data.data.rows]
  store.count = res.data.data.count;
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.home-wrapper {
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  footer {
    background-color: #0e0f10;
    flex-shrink: 0;
    height: 50px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: white;
  }
  header {
    background-color: #0d6efd;
    flex-shrink: 0;
    height: 60px;
    width: 100%;
    padding-left: 110px;
    padding-right: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: white;
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #0d6efd;
    }
  }
  .boxx {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .con {
      width: 100%;
      height: 260px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box-wrapper {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      .boxall {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-left: 110px;
        padding-right: 110px;
        .box {
          color: #2c3e50;
          box-shadow: 1px 2px 10px rgb(0 0 0 / 10%);
          //  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          border: 1px #e8e8eb solid;
          padding: 25px;
          width: 32%;
          height: 270px;
          background-color: white;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          .imgbox {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 17px;
            .img {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              overflow: hidden;
              margin-bottom: 5px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .zi {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            font-size: 15px;
            /* 1.溢出隐藏 */
            overflow: hidden;
            /* 2.用省略号来代替超出文本 */
            text-overflow: ellipsis;
            /* 3.设置盒子属性为-webkit-box  必须的 */
            display: -webkit-box;
            /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
            word-break: break-all;
            /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
            -webkit-box-orient: vertical;
          }
        }
      }
      .title {
        height: 50px;
        font-size: 18px;
        color: #4e4f52;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .foo {
        height: 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>